<template><!--日志管理页面-->
    <el-container class="paper-page4">
      <el-header>
              <common-header></common-header>
          </el-header>
      
      <div>
          <el-header class="paper-header">
              
              <div class="page-title3"><h1>全部日志</h1>   
              </div>
              
              
          </el-header>
          
      </div>
        
      
      <el-main class="paper-main2">
        <div class="next-content">
        <!-- 静态生成表格列 -->
        <el-table
          :header-cell-style="{
            fontSize: '18px'
          }" 
          :cell-style="{
          fontFamily: 'MicroSoft YaHei',
          fontSize: '18px', 
          }"
          :default-sort = "{prop: 'e_id'}"
          :fit="true"
          :data="tableData" 
          @sort-change="sortChange"
          style="width: 100%"
          
        >
        <el-table-column prop="id" label="序号"  width="100" sortable>
            
          </el-table-column>
          <el-table-column  prop="studentid" label="学生编号" sortable="custom" width="140"> 
           
          </el-table-column>
          <el-table-column   prop="studentname" label="学生姓名" sortable="custom" width="120"> 
          </el-table-column>
          <el-table-column   prop="stuclass" label="学生班级" sortable="custom" width="250"> 
           
          </el-table-column>

          <el-table-column   prop="questionid" label="题目编号" sortable width="120"> 
          </el-table-column>
          <el-table-column   prop="exerciseid" label="试卷编号" sortable width="120"> 
          </el-table-column>
          <el-table-column   prop="difficulty" label="题目难度" sortable="custom" width="120"> 
          </el-table-column>
          <el-table-column   prop="qcontent" label="题目内容" sortable="custom" width="400"> 
          </el-table-column>
          <el-table-column   prop="answer" label="参考答案" sortable="custom" width="400"> 
          </el-table-column>
          <el-table-column   prop="stuanswer" label="学生答案" sortable="custom" width="400"> 
          </el-table-column>
          <el-table-column   prop="stuidea" label="作答思路" sortable="custom" width="400"> 
          </el-table-column>
          <el-table-column   prop="oldscore" label="原得分" sortable="custom" width="120"> 
          </el-table-column>
          <el-table-column   prop="newscore" label="新得分" sortable="custom" width="120"> 
          </el-table-column>
          <el-table-column   prop="optime" label="操作时间" sortable="custom" width="300"> 
          </el-table-column>
          <el-table-column   prop="opid" label="操作者编号" sortable="custom" width="170"> 
          </el-table-column>
          <el-table-column   prop="opname" label="操作者姓名" sortable="custom" width="170"> 
          </el-table-column>
          
          <el-table-column>
            <template slot-scope="scope">
                 <div>
                   <a href="#" @click="delClick(scope.row)">删除</a>
                 </div>
               </template>
          </el-table-column>
          
        </el-table>
        <el-pagination
          background      
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10,50,100,200]"
          :page-size="pagesize"
          layout="total,jumper,prev, pager, next,sizes"
          :total="total"
        ></el-pagination>
       </div>
        
        
      </el-main>
    </el-container>
  </template>
  
  <script>
  import CommonHeader from '../components/CommonHeader.vue'
  
  import {getLog,delLog } from "@/api/api.js"
  
  
  
  export default {
      components: {
          CommonHeader
      },
    data() {
      return {
        rules:{
          
          
        },
        currentPage:1,
        pagesize:50,
        total:0,
        tableAllData:[],
        tableData: [
        ],
        tableLable: {
          
  
        },
        delRowId:'',
        formLabelWidth: "120px",
       
        form:{
          id:'',
          studentName:'',
          studentId:'',
          stuclass:'',
          exerciseId:'',
          questionId:'',
          qtitle:'',
          qcontent:'',
          difficulty:'',
          opid:'',
          opname:'',
          optime:'',
        }
      };
    },
    mounted() {
      
      this.getAllLogs()
      this.$nextTick(function () {
                var div = document.querySelector('.paper-page4');
                div.style.height = window.innerHeight + 'px';
                console.log('mounted: ', div);
                console.log('mounted: ', window.innerHeight);
      })
      this.setScrollBar();
      // 浏览器缩放，更新ScrollBar位置
      window.addEventListener('resize', this.setScrollBar);
    },
    
    methods: {
      setScrollBar() {
                this.$nextTick(function () {
                    var div = document.querySelector('.paper-page4');
                    div.style.height = window.innerHeight - 10 + 'px';
                    console.log('mounted: ', div);
                    console.log('mounted: ', window.innerHeight);
                })
      },
      getAllLogs(){
        getLog().then(res=>{
          const { code, result } = res.data
          if (code === '0000') {
             
  
              this.tableAllData=result
              //this.tableAllData.sort(this.sortListDesc('id'))
              this.tableData = result.slice(
                (this.currentPage-1)*this.pagesize,
                this.currentPage*this.pagesize
              )
              this.total=result.length
              
          }
          
          
  
          
        })
      },
      //排序切换
      sortChange(column,prop,order){
          if (column.order === "descending") {
            
            this.tableAllData.sort(this.sortListDesc(column.column.property))
            
            this.tableData=this.tableAllData.slice(
                (this.currentPage-1)*this.pagesize,
                this.currentPage*this.pagesize
              )
              this.total=this.tableAllData.length
            
          
          } else if (column.order === "ascending") {
            
            
            this.tableAllData.sort(this.sortList(column.column.property))
            this.tableData=this.tableAllData.slice(
                (this.currentPage-1)*this.pagesize,
                this.currentPage*this.pagesize
              )
              this.total=this.tableAllData.length
            
            
                
          } else {
            this.getAllLogs()
          }
  
  
        },
           //通过数组对象的某个属性进行排序		
      sortList(property) {
        console.log('pop',property)
        return function(a, b) {
          var value1 =  a[property];
          var value2 =  b[property];
          if(property=='questionid'||property=='exerciseid'||property=='id'){
            return value1-value2
          } 
            return a[property].localeCompare(b[property])
          
            
        };
      },
  
      //通过数组对象的某个属性进行倒序排列
      sortListDesc(property) {
        return function(a, b) {
          var value1 =  a[property];
          var value2 =   b[property];
          if(property=='questionid'||property=='exerciseid'||property=='id'){
            return value2-value1
          } 
            return b[property].localeCompare(a[property])
          
            
        };
      },
      
       //分页 初始页currentPage、初始每页数据数pagesize和数据testpage--->控制每页几条
       handleSizeChange(size){
          this.pagesize = size;
          this.tableData=this.tableAllData.slice(
                (this.currentPage-1)*this.pagesize,
                this.currentPage*this.pagesize
              )
              this.total=this.tableAllData.length
         
          
      },
      // 控制页面的切换
      handleCurrentChange(currentPage) {
          this.currentPage = currentPage;
          this.tableData=this.tableAllData.slice(
                (this.currentPage-1)*this.pagesize,
                this.currentPage*this.pagesize
              )
              this.total=this.tableAllData.length
         
      },
      // 删除日志
      delClick(row){
        this.$confirm( "将彻底删除选中记录，请谨慎操作！", {
                confirmButtonText: "确认",
                cancelButtonText:'取消',
                type:'warning',
                callback: (action) => {
                    if(action=='confirm'){
                        
                       delLog({id:row.id}).then(res=>{
                        const { code, result } = res.data
                        if (code === '0000') {
                            console.log("成功",result)
                            this.$alert( "删除成功", {
                                confirmButtonText: "确认",
                                callback: (action) => {
                                  this.$router.go(0)
                                    },
                                });
                                }
                        else{
                          this.$alert(result.detail)
                        }
                        
                      })
                    }
                    else{

                    }
                    },
                });
                
        
      }
      
    }
  };
  </script>
  
  <style>
  .el-header {
      padding: 0;
  }
  .teacherButton{
      display: flex;
      justify-content: flex-end;
  }
  .paper-page4 {
    background-color: #eeeeee;
    padding: 10px;
    display: flex;
  }
  .paper-header {
    background-color: white;
    border-radius: 10px;
    box-shadow: 1px 1px 1px rgb(154, 154, 154);
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .page-title3 {
    margin-left: 20px;
    margin-right: auto;
  }
  .paper-main2 {
    margin-top: 10px;
    background-color: white;
    border-radius: 10px;
    display: flex;
    box-shadow: 1px 1px 1px rgb(154, 154, 154);
    
  }
 
  </style>
  